<template>
  <div class="auth">
    <white-space/>
    <my-img class-name="bg" src="bg_login@2x.png"/>

    <my-button
      v-if="plant === 'app'"
      :height="104"
      :margin-top="20"
      :width="670"
      @click.native="getUserInfo"
      class-name="wx-login"
      open-type="getUserInfo"
    >
      <my-img class-name="wx" src="icon/wx.png"/>
      微信登录
    </my-button>

    <my-button
      v-if="plant === 'wx'"
      :height="104"
      :margin-top="20"
      :width="670"
      @getUserInfo="getUserInfo"
      class-name="wx-login"
      open-type="getUserInfo"
    >
      <my-img class-name="wx" src="icon/wx.png"/>
      微信登录
    </my-button>

    <my-button
      :height="104"
      :margin-top="20"
      :width="670"
      @click.native="toCode"
      class-name="phone-login"
    >
      手机号登录
    </my-button>

    <div class="agreement">
      <checkbox-group @change="checkboxChange">
        <checkbox
          :checked="checked"
          :key="item"
          :value="item.value"
          color="#00BD81"
          style="transform:scale(0.7);"
          v-for="item in items"
        />
        已阅读并同意以下协议 <br/>
      </checkbox-group>
      <navigator class="link" url="/pages_user/user-private/user-private"
      >《用户服务协议》
      </navigator>
      和
      <navigator class="link" url="/pages_user/use-p/use-p"
      >《用户隐私政策》
      </navigator>
    </div>
  </div>
</template>

<script>
  import { NavigateTo } from "../../../utils/router";
  import { mapActions, mapState } from "vuex";
  import { Toast } from "../../../utils/modal";

  export default {
    name: "auth",
    computed: mapState("User", ["open_id", 'plant']),
    data() {
      return {
        items: [
          {
            value: "a",
            checked: false
          }
        ]
      };
    },
    methods: {
      ...mapActions("User", ["getOpenId", "reqCheckOpenId", "reqWxLogin"]),
      NavigateTo,
      checkboxChange: function (e) {
        let items = this.items,
          values = e.detail.value;
        for (let i = 0, lenI = items.length; i < lenI; ++i) {
          const item = items[i];
          if (values.includes(item.value)) {
            this.$set(item, "checked", true);
          } else {
            this.$set(item, "checked", false);
          }
        }
      },
      toCode() {
        if (!this.items[0].checked) {
          return Toast({ title: "请先阅读用户协议" });
        }
        this.NavigateTo({
          url: "/pages/login/verify-code/verify-code"
        });
      },
      async getUserInfo(e) {
        if (!this.items[0].checked) {
          return Toast({ title: "请先阅读用户协议" });
        }
        let plant = await this.getOpenId({});
        switch (plant) {
          case "wx":
            if (e.target.errMsg === "getUserInfo:ok") {
              Toast({ title: "登录中" });
              await uni.setStorageSync("userInfo", e.target.userInfo);
              let isBindPhone = await this.reqCheckOpenId();
              if (isBindPhone) {
                const { open_id } = this;
                return await this.reqWxLogin({ open_id });
              }
              NavigateTo({ url: "/pages/login/bind-phone/bind-phone" });
            }
            break;
          case "app":
            // 获取用户信息
            uni.getUserInfo({
              provider: "weixin",
              success: async infoRes => {
                Toast({ title: "登录中" });
                await uni.setStorageSync("userInfo", infoRes.userInfo);
                console.log("用户：" + infoRes.userInfo);
                let isBindPhone = await this.reqCheckOpenId();
                if (isBindPhone) {
                  const { open_id } = this;
                  return await this.reqWxLogin({ open_id });
                }
                NavigateTo({ url: "/pages/login/bind-phone/bind-phone" });
              },
              fail() {
                Toast({ title: "无微信,登录失败" });
              }
            });
        }
      }
    }
  };
</script>

<style lang="scss">
  @import "../../../uni";

  .auth {
    .bg {
      width: 100vw;
      height: upx(750);
    }

    .wx-login {
      background: linear-gradient(
          309deg,
          rgba(9, 182, 188, 1) 0%,
          rgba(0, 224, 180, 1) 100%
      ) !important;
      outline: none !important;
      box-shadow: none !important;
    }

    .phone-login {
      background: #fff !important;
      color: $theme-yellow !important;
      box-shadow: none !important;
      border: upx(2) solid $theme-yellow !important;
      box-sizing: border-box !important;
    }

    .wx {
      width: upx(64);
      height: upx(64);
      margin-right: upx(20);
    }

    .agreement {
      width: 70vw;
      position: fixed;
      bottom: upx(40);
      left: 0;
      right: 0;
      margin: 0 auto;
      line-height: 1.5;
      @include ft(28);
      text-align: center;

      .link {
        display: inline;
        color: #3bb6bc;
      }
    }
  }
</style>
